// table组件
Vue.component("qfTable3Column", {
    props: ["prop", "label"],
    template: `<span />`,
    mounted() {
    //     console.log(this) //组件实例/对象
    //     console.log(this.$parent)  //父组件实例（qfTable)
    this.$parent.column.push(this)
    },
})
Vue.component("qfTable3", {
    data() {
        return {
            column: [
                // {title: '编号', prop: 'id'}
            ]
        }
    },
    mounted() {
       console.log(this.column)  
    //    console.log(this.column[4].$scopedSlots.default)
    },
    props: {
        data: {
            type: Array,
            default: [],
        }
    },
    template: `<table border="1" cellpadding="10" cellspacing="0">
        <thead>
        <tr>
        <th v-for="item in column">{{item.label}}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="row in data">
        <!--
        <td>{{row.id}}</td>
        <td>{{row.uname}}</td>
        <td>{{row.age}}</td>
        <td></td>
        {{row[col.prop]}}
        -->
        <td v-for="(col, index) in column">
        {{column[index].$scopedSlots.default ? column[index].$scopedSlots.default(row)[0].text : row[col.prop]}}
        </td>
        </tr>
        <slot></slot>
        </tbody>
    </table>`
})
// tips提示框组件
Vue.component("qfTips", {
    // props: {
    //     // content: {
    //     //     type: String,
    //     //     required: true,
    //     // }
    // },
    template: `<div class="qf-tips">
        <slot></slot>
    </div>`
})
// table对话框组件
Vue.component('qfTable2', {
    props: {
        columns: {
            type: Array,
            required: true,
            // validator() {}
        },
            data: {
                type: Array,
                required: true,
            }
    },
    template: `<table border="1" cellpadding="10" cellspacing="0">
    <thead>
    <tr>
    <th v-for="thItem in columns">{{thItem.title}}</th>
    </tr>
    </thead>
    <tbody>
    <template v-for="trItem in data">
        <tr>
            <template v-for="tdItem in columns">
                <td v-if="tdItem.render">
                <span v-html="tdItem.render(trItem)"></span>
                </td>
                <td v-else="tdItem.render">
                {{trItem[tdItem.key]}}
                </td>
            </template>        
        </tr>
    </template>
    </tbody>
    </table>`
})
// 分页page组件
Vue.component('qfPage', {
    props: {
        total: {
            type: Number,
            default: 0,
        },
        pageSize: {
            type: Number,
            default: 2,
        }
    },
    data() {
        return {
            totalPage: 0
        }
    },
    watch: {
        // total(newdata, olddata) {}
        total: {
            handler(newdata) {
                // console.log(newdata)
                // this.totalPage = Math.ceil(总条数/每页显示条数)
                this.totalPage = Math.ceil(this.total/this.pageSize)
                // console.log(this.totalPage)
            },
            immediate: true,
        }
    },
    template: `<div class="qf-page">
        <!--
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        -->
        <span v-for="num in totalPage"@click="$emit('click-page', num)">{{num}}</span>
    </div>`
})
// Dialog组件
Vue.component('qfDialog', {
    props: {
        title: {
            type: String,
            default: '默认标题'
        },
        content: String,
        visible: {
            type: Boolean,
            default: false,
        }
    },
    template: `<div class="qf-dialog" v-if="visible">
        <div class="box">
            <div class="header">{{title}}</div>
            <div class="main">
                {{content}}
            </div>
            <div class="footer">
                <!-- <button @click="$emit('close', false)">取消</button> -->
                <button @click="$emit('update:visible', false)">取消</button>
                <button>确定</button>
            </div>
        </div>
    </div>`
})
// loading2组件
Vue.component('qfLoading2', {
    props: {
        state: {
            type: Boolean,
            default: false,
        }
    },
    // template: `<div class="qf-loading2" v-if="state" @click="$emit('close',data)">
    template: `<div class="qf-loading2" v-if="state" @click="$emit('update:state',data)">
    <span>loading...</span>
    </div>`
})
// loading1组件
Vue.component('qfLoading1', {
    props: {
        state: {
            type: Boolean,
            default: false,
        }
    },
    template: `<div class="qf-loading1" v-if="state">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>`,
})
// 按钮组件
Vue.component('qfButton', {
    props: {
        //TODO: slot插槽没学，先用属性获取
        // content: {
        //     type: String,
        //     required: true,
        // },
        type: {
            type: String,
            default: 'primary'
        }
    },
    // template: `<button :class="['qf-button', 'qf-button--'+type, 'qf-button--normal']">
    //             <div class="qf-button__content">
    //             <span class="qf-button__text">{{content}}</span>
    //             </div>
    //             </button>`
    template: `<button :class="['qf-button', 'qf-button--'+type, 'qf-button--normal']">
    <div class="qf-button__content">
    <span class="qf-button__text"><slot></slot></span>
    </div>
    </button>`
})
// 导航栏组件
Vue.component('qfNavBar', {
    props: {
        title: {
            type: String,
            required: true,
        },
        leftArrow: Boolean, //传就true，不传就false
    },
    template: `<div class="qf-nav-bar">
        <span @click="$emit('click-left')">
            {{leftArrow? '&lt;返回' : ''}}
        </span>
        <span>{{title}}</span>
        <span @click="$emit('click-right')">🔍搜索</span>
    </div>`,
    // mounted() {
    //     console.log(this.leftArrow)
    // }
})
// 表单组件
Vue.component('qfTable', {
    props: {
        state: {
            type: Boolean,
            default : true,
        }
    },
    data() {
        return {
            // account: '',
            // password: '',
            formData: {
                account: '',
                password: '',
            }
        }
    },
    template: `<fieldset>
        <legend>千锋封装的表单</legend>
        <!--
        用户名：<input type="text" v-model="account"/>
        密码：<input type="password" v-model="password"/>
        <button @click="$emit('submit', account, password)">提交</button>
        -->
        用户名：<input type="text" v-model="formData.account"/>
        密码：<input type="password" v-model="formData.password"/>
        <button v-if="state" @click="$emit('submit', formData)">提交</button>
    </fieldset>`
})